<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search, Filter, ArrowDown } from '@element-plus/icons-vue'

// 支出列表列数据
const columns = [
    { title: '支出编号', key: 'expendNo', sortable: true },
    { title: '支出类型', key: 'expendType', sortable: true },
    { title: '客户简称', key: 'customerShortName', sortable: true },
    { title: '关联合同订单', key: 'relatedOrder', sortable: true },
    { title: '状态', key: 'status', sortable: true, filterable: true },
    { title: '支出金额', key: 'expendAmount', sortable: true },
    { title: '付款账户', key: 'paymentAccount' },
    { title: '提交人', key: 'submitter', filterable: true },
    { title: '提交时间', key: 'submitTime', sortable: true },
    { title: '出纳确认人', key: 'submitpeople', sortable: true },
    { title: '付款时间', key: 'payTime', sortable: true },
    { title: '客户部门', key: 'khbm', sortable: true },

];

const mockData = ref([]);
const loading = ref(true);
const activeName = ref('all'); // 默认选中"全部支出"
const totalAmount = ref('0.00'); // 支出总金额

// 筛选表单数据
const filterForm = ref({
    expendType: '',
    paymentAccount: '',
    submitter: '',
    submitTimeRange: [],
    paymentTimeRange: [],
    department: '',
    includeSubDept: false,
    payeeInfo: '',
    hasReceivedInvoice: null
});

// 搜索关键词
const searchKeyword = ref('');

// 处理标签页切换
const handleTabChange = (tabKey) => {
    loading.value = true;
    activeName.value = tabKey;

    setTimeout(() => {
        // 按标签页加载对应数据
        switch (tabKey) {
            case 'all':
                mockData.value = [
                    {
                        expendNo: 'EXP2023001',
                        expendType: '服务费',
                        customerShortName: '阿里科技',
                        relatedOrder: 'ORD2023001',
                        status: '已完成',
                        expendAmount: 12000,
                        paymentAccount: '公司基本户',
                        submitter: '张三',
                        submitTime: '2023-10-01',
                        submitpeople: 'zhan',
                        payTime: '12-4',
                        khbm: '督察部',

                    },
                    {
                        expendNo: 'EXP2023001',
                        expendType: '服务费',
                        customerShortName: '阿里科技',
                        relatedOrder: 'ORD2023001',
                        status: '已完成',
                        expendAmount: 12000,
                        paymentAccount: '公司基本户',
                        submitter: '张三',
                        submitTime: '2023-10-01',
                        submitpeople: 'zhan',
                        payTime: '12-4',
                        khbm: '督察部',

                    },
                    {
                        expendNo: 'EXP2023001',
                        expendType: '服务费',
                        customerShortName: '阿里科技',
                        relatedOrder: 'ORD2023001',
                        status: '已完成',
                        expendAmount: 12000,
                        paymentAccount: '公司基本户',
                        submitter: '张三',
                        submitTime: '2023-10-01',
                        submitpeople: 'zhan',
                        payTime: '12-4',
                        khbm: '督察部',

                    },
                    {
                        expendNo: 'EXP2023001',
                        expendType: '服务费',
                        customerShortName: '阿里科技',
                        relatedOrder: 'ORD2023001',
                        status: '已完成',
                        expendAmount: 12000,
                        paymentAccount: '公司基本户',
                        submitter: '张三',
                        submitTime: '2023-10-01',
                        submitpeople: 'zhan',
                        payTime: '12-4',
                        khbm: '督察部',

                    },
                ];
                break;
            case 'toSubmit':
                mockData.value = [
                    {
                        expendNo: 'EXP2023001',
                        expendType: '服务费',
                        customerShortName: '阿里科技',
                        relatedOrder: 'ORD2023001',
                        status: '已完成',
                        expendAmount: 12000,
                        paymentAccount: '公司基本户',
                        submitter: '张三',
                        submitTime: '2023-10-01',
                        submitpeople: 'zhan',
                        payTime: '12-4',
                        khbm: '督察部',

                    },
                    {
                        expendNo: 'EXP2023001',
                        expendType: '服务费',
                        customerShortName: '阿里科技',
                        relatedOrder: 'ORD2023001',
                        status: '已完成',
                        expendAmount: 12000,
                        paymentAccount: '公司基本户',
                        submitter: '张三',
                        submitTime: '2023-10-01',
                        submitpeople: 'zhan',
                        payTime: '12-4',
                        khbm: '督察部',

                    },
                ];
                break;
            case 'toConfirm':
                mockData.value = [
                    {
                        expendNo: 'EXP2023001',
                        expendType: '服务费',
                        customerShortName: '阿里科技',
                        relatedOrder: 'ORD2023001',
                        status: '已完成',
                        expendAmount: 12000,
                        paymentAccount: '公司基本户',
                        submitter: '张三',
                        submitTime: '2023-10-01',
                        submitpeople: 'zhan',
                        payTime: '12-4',
                        khbm: '督察部',

                    },
                ];
                break;
            case 'completed':
                mockData.value = [
                    {
                        expendNo: 'EXP2023001',
                        expendType: '服务费',
                        customerShortName: '阿里科技',
                        relatedOrder: 'ORD2023001',
                        status: '已完成',
                        expendAmount: 12000,
                        paymentAccount: '公司基本户',
                        submitter: '张三',
                        submitTime: '2023-10-01',
                        submitpeople: 'zhan',
                        payTime: '12-4',
                        khbm: '督察部',

                    },
                ];
                break;
        }

        // 计算总金额
        calculateTotalAmount();
        loading.value = false;
    }, 500);
};

// 计算总金额
const calculateTotalAmount = () => {
    const total = mockData.value.reduce((sum, item) => sum + item.expendAmount, 0);
    totalAmount.value = total.toFixed(2);
};

// 筛选表单提交
const handleFilterSubmit = () => {
    loading.value = true;
    setTimeout(() => {
        // 这里添加实际筛选逻辑
        const filtered = [...mockData.value].filter(item => {
            // 支出类型筛选
            if (filterForm.value.expendType && !item.expendType.includes(filterForm.value.expendType)) return false;
            // 付款账户筛选
            if (filterForm.value.paymentAccount && !item.paymentAccount.includes(filterForm.value.paymentAccount)) return false;
            // 提交人筛选
            if (filterForm.value.submitter && !item.submitter.includes(filterForm.value.submitter)) return false;
            // 发票状态筛选
            if (filterForm.value.hasReceivedInvoice !== null) {
                const hasInvoice = item.status === '已完成'; // 假设已完成状态表示已收到票
                if (filterForm.value.hasReceivedInvoice !== hasInvoice) return false;
            }
            return true;
        });

        mockData.value = filtered;
        calculateTotalAmount();
        loading.value = false;
    }, 500);
};

// 重置筛选表单
const resetFilterForm = () => {
    filterForm.value = {
        expendType: '',
        paymentAccount: '',
        submitter: '',
        submitTimeRange: [],
        paymentTimeRange: [],
        department: '',
        includeSubDept: false,
        payeeInfo: '',
        hasReceivedInvoice: null
    };
    // 重新加载当前标签页数据
    handleTabChange(activeName.value);
};

// 搜索功能
const handleSearch = () => {
    if (!searchKeyword.value) {
        // 搜索为空时重新加载当前标签页数据
        handleTabChange(activeName.value);
        return;
    }

    loading.value = true;
    setTimeout(() => {
        const keyword = searchKeyword.value.toLowerCase();
        const filtered = mockData.value.filter(item => {
            return item.customerShortName.toLowerCase().includes(keyword) ||
                item.relatedOrder.toLowerCase().includes(keyword) ||
                item.expendNo.toLowerCase().includes(keyword);
        });
        mockData.value = filtered;
        calculateTotalAmount();
        loading.value = false;
    }, 500);
};

// 页面挂载时加载初始数据
onMounted(() => {
    handleTabChange('all');
});
</script>

<template>
    <div class="expend-management">
        <!-- 顶部筛选区域 -->
        <div class="top-filter">
            <div class="top-filter-left">
                <!-- 筛选弹窗 -->
                <stick-popup>
                    <template #show>
                        <div class="filter-btn">
                            <div class="filter-btn-label">筛选</div>
                            <div class="filter-btn-icon">
                                <Filter />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <div class="filter-form-container">
                            <el-form :model="filterForm" label-width="100px">
                                <!-- 支出类型 -->
                                <el-form-item label="支出类型">
                                    <el-input v-model="filterForm.expendType" placeholder="搜索支出类型" />
                                </el-form-item>

                                <!-- 付款账户 -->
                                <el-form-item label="付款账户">
                                    <el-input v-model="filterForm.paymentAccount" placeholder="搜索付款账户" />
                                </el-form-item>

                                <!-- 提交人 -->
                                <el-form-item label="提交人">
                                    <el-input v-model="filterForm.submitter" placeholder="搜索提交人" />
                                </el-form-item>

                                <!-- 提交时间 -->
                                <el-form-item label="提交时间">
                                    <el-date-picker v-model="filterForm.submitTimeRange" type="daterange"
                                        range-separator="到" start-placeholder="请选择日期" end-placeholder="请选择日期" />
                                </el-form-item>

                                <!-- 付款时间 -->
                                <el-form-item label="付款时间">
                                    <el-date-picker v-model="filterForm.paymentTimeRange" type="daterange"
                                        range-separator="到" start-placeholder="请选择日期" end-placeholder="请选择日期" />
                                </el-form-item>

                                <!-- 所属部门 -->
                                <el-form-item label="所属部门">
                                    <el-input v-model="filterForm.department" placeholder="搜索所属部门" />
                                </el-form-item>

                                <!-- 部门包含下级 -->
                                <el-form-item>
                                    <el-checkbox v-model="filterForm.includeSubDept" label="部门包含下级" />
                                </el-form-item>

                                <!-- 收款人户名/账号 -->
                                <el-form-item label="收款人户名/账号">
                                    <el-input v-model="filterForm.payeeInfo" placeholder="搜索收款人户名/账号" />
                                </el-form-item>

                                <!-- 是否收到票 -->
                                <el-form-item label="是否收到票">
                                    <div class="radio-group">
                                        <el-radio v-model="filterForm.hasReceivedInvoice" :label="true">
                                            已收到
                                        </el-radio>
                                        <el-radio v-model="filterForm.hasReceivedInvoice" :label="false">
                                            未收到
                                        </el-radio>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="filter-actions">
                            <el-button type="text" @click="resetFilterForm">重置</el-button>
                            <el-button type="primary" @click="handleFilterSubmit">确认</el-button>
                        </div>
                    </template>
                </stick-popup>

                <!-- 搜索框 -->
                <div class="search-box">
                    <el-input v-model="searchKeyword" placeholder="客户简称/合同订单编号/支出编号" @keyup.enter="handleSearch">
                        <template #append>
                            <el-button :icon="Search" @click="handleSearch" />
                        </template>
                    </el-input>
                </div>
            </div>

            <!-- 右侧操作按钮 -->
            <div class="top-filter-right">
                <el-button type="primary">
                    新增支出
                    <ArrowDown class="btn-icon" />
                </el-button>
                <el-button type="primary">
                    批量操作
                    <ArrowDown class="btn-icon" />
                </el-button>
                <el-button type="primary">导出支出</el-button>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-container">
            <!-- 状态标签页 -->
            <div class="status-tabs">
                <el-tabs v-model="activeName" @tab-click="(tab) => handleTabChange(tab.name)" stretch>
                    <el-tab-pane label="全部支出" name="all"></el-tab-pane>
                    <el-tab-pane label="待提交/审核不通过" name="toSubmit"></el-tab-pane>
                    <el-tab-pane label="待出纳确认" name="toConfirm"></el-tab-pane>
                    <el-tab-pane label="已完成" name="completed"></el-tab-pane>
                </el-tabs>

                <!-- 支出总金额 -->
                <div class="total-amount">
                    支出总金额：{{ totalAmount }}
                </div>
            </div>

            <!-- 支出表格 -->
            <div class="expend-table">
                <my-table :loading="loading" :columns="columns" :dataSource="mockData" :showIndex="true"
                    :show-selection="true">
                    <!-- 金额格式化 -->
                    <template #data-expendAmount="scope">
                        ¥{{ scope.data.expendAmount.toFixed(2) }}
                    </template>

                    <!-- 操作列 -->
                    <template #data-operation="scope">
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </my-table>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.expend-management {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding-bottom: 20px;
}

.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;

    .top-filter-left {
        display: flex;
        align-items: center;
        gap: 15px;

        .filter-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 15px;
            height: 32px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
                border-color: #409eff;
                color: #409eff;
            }
        }

        .search-box {
            width: 300px;
        }
    }

    .top-filter-right {
        display: flex;
        gap: 10px;

        .btn-icon {
            margin-left: 5px;
            font-size: 14px;
        }
    }
}

.table-container {
    width: calc(100% - 40px);
    margin: 20px auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 16px;
    box-sizing: border-box;

    .status-tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .total-amount {
            color: #606266;
            font-size: 14px;
            font-weight: 500;
        }
    }

    .expend-table {
        width: 100%;
        overflow-x: auto;
    }
}

.filter-form-container {
    padding: 15px;
    width: 400px;

    .el-form-item {
        margin-bottom: 15px;
    }

    .radio-group {
        display: flex;
        gap: 20px;
    }
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
}
</style>